<template>
    <div class="component-div">
        <!-- 页面标题 -->
        <div class="page-title">
            <!-- 标题文本 -->
            <div class="title-text">
                标签管理
            </div>
            <div class="blue-bar">
        </div>
        <!-- 页面内容 -->
        <div class="page-content">
            <!-- 下面div 的 class自己写，例如class="doctor-management" -->
            <div class="labelList">
                <div class="keyword">
                    <el-input  class="w-50 m-2 input" size="large" v-model="keyword" placeholder="请输入关键字" :suffix-icon="Search" />
                    <div class="addLabel">
                        <el-button type="primary" size="large">新增标签</el-button>
                    </div>
                </div>
                <div class="table">
                    <el-table :data="pageInfo" style="width: 100%">
                        <el-table-column fixed prop="id" label="编号" width="200" />
                        <el-table-column prop="name" label="标签名称" width="200" />
                        <el-table-column prop="addPeople" label="添加人" width="200" />
                        <el-table-column prop="modifyTime" label="最后修改时间" width="300" />
                        <!-- <el-table-column prop="isEnable" label="使用状态">
                            <el-switch inline-prompt="true" :model="isEnable==1" active-text="启用" inactive-text="禁用" width="60" @click="s"></el-switch>
                            <template #default="scope">
                                <el-switch inline-prompt="true" v-model="pageInfo[scope.$index].isEnable" active-text="启用" inactive-text="禁用" width="60" @click="s"></el-switch>
                                {{pageInfo[scope.$index].isEnable==1}}
                            </template>
                        </el-table-column> -->
                        <el-table-column fixed="right" label="操作" width="120">
                            <template #default="scope">
                                <el-button type="text" size="small" @click="modifyLabel" style="color:blue">编辑</el-button>
                                <el-button type="text" size="small" @click="removeLabel(pageInfo[scope.$index].id)" style="color:red">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </div>
      </div>
    </div>
</template>

<script>
    import {Search} from '@element-plus/icons-vue'
    import { mapActions } from 'vuex'
    export default {
        data() {
            return {
                Search,
                keyword:'',
                pageNum:'',
                pageInfo:[],
                label:{
                    id:'',
                    name:'',
                    addPeople:'',
                    modifyTime:'',
                    isEnable:''
                }
            }
        },
        created(){
            this.getLabelList()
        },
        methods:{
            ...mapActions(['doGetLabelList','doRemoveLabel']),
            getLabelList() {
                this.doGetLabelList(this.keyword,this.pageNum).then(res => {
                    this.pageInfo = res.data.data.list
                })
            },
            removeLabel(id){
                this.doRemoveLabel(id).then(res=>{
                    console.log(res)
                    this.getLabelList()
                })
            }
        },
    }        
</script>

<style scoped lang="less">
    .input{
        width: 376px;
    }
    .addLabel{
        display: inline-block;
        float:right;
    }
</style>